<template>
  <van-tab :title="'购买记录'">
    <van-cell-group>
      <van-cell>
        <item-card-mini :goods="goods"/>
      </van-cell>
    </van-cell-group>

    <div class="sales_text">
      <span>累计销售：{{(goods.salesreal + goods.sales) + goods.unit}}</span>
    </div>
    <van-cell-group>
      <van-cell v-for="(record, i) in buyMembers" v-if="buyMembers" :key="i">
        <div class="flex">
          <img class="avatar_icon" v-lazy="record.avatar" width="30px" height="30px">
          <div class="name_text">{{record.nickname}}</div>
          <div class="num_text">
            <b>{{record.total}}</b>
          </div>
          <div class="date_text">{{record.createTime | dateTimeFormat}}</div>
        </div>
      </van-cell>
      <van-cell>
        <div style="text-align: center;">{{moreText}}</div>
      </van-cell>
    </van-cell-group>
    <item-detail :desc="goods.description" v-if="goods && (goods.buyLogs.length ===0)"/>
  </van-tab>
</template>

<script>
import ItemCardMini from "@/vue/components/item-card-mini/";
import ItemDetail from "@/vue/components/item-detail/";
import { Tab } from "vant";
import moment from "moment";

export default {
  name: "tab-records",

  props: {
    goods: Object
  },

  computed: {
    moreText() {
      let text = "暂时还没有购买记录";

      if (this.buyMembers.length > 0) {
        text = "还有很多呢，就显示这么多吧";
      }

      return text;
    },
    buyMembers() {
      //过滤无效数据
      const start = moment(this.goods.timestart).utc();

      let buyLogs = this.goods.buyLogs.filter(item => {
        return moment(item.createTime) >= start;
      });

      return buyLogs || [];
    }
  },

  components: {
    [ItemCardMini.name]: ItemCardMini,
    [ItemDetail.name]: ItemDetail,
    [Tab.name]: Tab
  }
};
</script>

<style lang="scss" scoped>
.sales_text {
  background-color: #18c852;
  color: #fff;
  margin-top: 10px;
  padding: 10px;
}
.avatar_icon {
  border-radius: 15px;
  margin-right: 5px;
}
.num_text {
  color: $red;
  font-size: 18px;
  flex: 1;
  text-align: center;
}
.name_text {
  max-width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  margin-left: 10px;
}
.date_text {
  flex: 1;
  text-align: right;
}
</style>
